{% extends 'layout.html' %}
{% load static %}


{% block content %}
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">折线图</div>
            <div class="panel-body">
                    <div id="m1" style="width: 100%; height: 400px"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-8">
                <div class="panel panel-default">
                    <div class="panel-heading">柱状图</div>
                    <div class="panel-body">
                            <div id="m2" style="width: 600px;height: 400px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="panel panel-default">
                    <div class="panel-heading">饼状图</div>
                    <div class="panel-body">
                            <div id="m3" style="width: 100%; height: 400px"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'js/echarts.js' %}"></script>
    <script type="text/javascript">

    $(function () {
        iniline();
        initBar();
        iniPie();
    })

    // 初始化折线图
    function iniline() {
        var myChart = echarts.init(document.getElementById('m1'));
        var option =  {
          title: {
            text: '业绩图',
            left:"center",

          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: [],
            bottom:0,
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: []
        };
        $.ajax({
            url:'/chart/line/',
            type:"get",
            dataType:"JSON",
            success:function (res) {
                if(res.status){
                    option.legend.data = res.data.legend;
                    option.xAxis.data = res.data.x_axis;
                    option.series = res.data.series_list;
                    myChart.setOption(option);
               }
            }
        })
    }

    // 初始化柱状图
    function initBar() {
        // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('m2'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '心之怪盗团成员业绩月度汇总信息',
          textAlign:"auto",
          left:"center",
        },
        tooltip: {},
        legend: {
          data: [], // 后台获取
          bottom:0
        },
        xAxis: {
          data: []  // 后台获取
        },
        yAxis: {},
        series: []  // 后台获取
      };

      $.ajax({
          url:"/chart/bar/",
          type:"get",
          dataType:"JSON",
          success:function (res) {
              // 将后台返回的数据，更新到option中。
              if (res.status){
                  option.legend.data = res.data.legend;
                  option.xAxis.data = res.data.x_axis;
                  option.series = res.data.series_list;
                  // 使用刚指定的配置项和数据显示图表。
                  myChart.setOption(option);
              }

          }
      })

    }


    // 初始化饼状图
    function iniPie() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('m3'));
        var option = {
          title: {
            text: '部门运算占比',
            subtext: '心之怪盗团',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            bottom:0
          },
          series: [
            {
              name: '预算',
              type: 'pie',
              radius: '50%',
              data: [
                { value: 1048, name: 'IT部门' },
                { value: 735, name: '运营' },
                { value: 580, name: '新媒体' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        $.ajax({
            url:"/chart/pie/",
            type:"get",
            dataType: "JSON",
            success:function (res) {
                if (res.status){
                    option.series[0].data = res.data;
                    myChart.setOption(option);
                }
            }
        })
    }
    </script>
{% endblock %}